<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏 - 地图编辑器</title>
    
    <!-- Bootstrap CSS -->
    <link href="../plugin/bootstrap-5.3.8-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="../plugin/bootstrap-icons-1.13.1/font/bootstrap-icons.css" rel="stylesheet">
    
    <!-- 地图编辑器CSS -->
    <link href="css/editor.css" rel="stylesheet">
</head>
<body>
    <div class="editor-container">
        <!-- 顶部标题栏 -->
        <header class="editor-header">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col-md-4">
                        <h1 class="editor-title">
                            <i class="bi bi-map"></i>
                            地图编辑器
                        </h1>
                    </div>
                    <div class="col-md-8">
                        <div class="editor-controls">
                            <button id="saveBtn" class="btn btn-success">
                                <i class="bi bi-save"></i> 保存地图
                            </button>
                            <button id="exportBtn" class="btn btn-primary">
                                <i class="bi bi-download"></i> 导出地图
                            </button>
                            <button id="clearBtn" class="btn btn-warning">
                                <i class="bi bi-trash"></i> 清空地图
                            </button>
                            <button id="clearAllBtn" class="btn btn-danger">
                                <i class="bi bi-eraser"></i> 擦除全屏
                            </button>
                            <button id="backBtn" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> 返回
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区域 -->
        <main class="editor-main">
            <div class="container-fluid">
                <div class="row">
                    <!-- 左侧工具栏 - 只保留模式和地图设置 -->
                    <div class="col-lg-2 col-md-3">
                        <div class="editor-sidebar">
                            <!-- 模式选择 -->
                            <div class="sidebar-section">
                                <h3 class="section-title">
                                    <i class="bi bi-gear"></i>
                                    游戏模式
                                </h3>
                                <div class="mode-selector">
                                    <div class="mode-option active" data-mode="normal">
                                        <h4>正常模式</h4>
                                        <p>适用于大多数游戏场景，只能放置障碍物</p>
                                    </div>
                                    <div class="mode-option" data-mode="duel">
                                        <h4>对决模式</h4>
                                        <p>支持障碍物、特殊物品刷新点和复活点</p>
                                    </div>
                                    <div class="mode-option" data-mode="boss">
                                        <h4>Boss模式</h4>
                                        <p>支持障碍物、特殊物品刷新点和Boss点</p>
                                    </div>
                                </div>
                            </div>

                            <!-- 地图设置 -->
                            <div class="sidebar-section">
                                <h3 class="section-title">
                                    <i class="bi bi-aspect-ratio"></i>
                                    地图设置
                                </h3>
                                <div class="map-settings">
                                    <div class="setting-group">
                                        <label for="mapWidth">地图宽度 (600-2400)</label>
                                        <input type="number" id="mapWidth" min="600" max="2400" step="20" value="1200">
                                    </div>
                                    <div class="setting-group">
                                        <label for="mapHeight">地图高度 (600-2400)</label>
                                        <input type="number" id="mapHeight" min="600" max="2400" step="20" value="1200">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 中间画布区域 -->
                    <div class="col-lg-8 col-md-6">
                        <div class="editor-canvas-container">
                            <div class="canvas-controls">
                                <div class="zoom-controls">
                                    <button id="zoomOut" class="btn btn-sm btn-outline-secondary">
                                        <i class="bi bi-dash"></i>
                                    </button>
                                    <span id="zoomLevel" class="zoom-display">100%</span>
                                    <button id="zoomIn" class="btn btn-sm btn-outline-secondary">
                                        <i class="bi bi-plus"></i>
                                    </button>
                                    <button id="zoomReset" class="btn btn-sm btn-outline-secondary">
                                        <i class="bi bi-arrow-clockwise"></i>
                                    </button>
                                </div>
                                <div class="editor-footer">
                                    <div class="status-bar">
                                        <div class="status-info">
                                            <span id="currentMode">模式: 正常</span>
                                            <span id="currentTool">工具: 放置</span>
                                            <span id="currentElement">元素: 障碍物</span>
                                        </div>
                                        <div class="status-stats">
                                            <span id="elementCount">元素数量: 0</span>
                                            <span id="mapSize">地图大小: 1200x1200</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="coordinate-display">
                                    <span id="coordinateDisplay">坐标: (0, 0)</span>
                                </div>
                            </div>
                            
                            <div class="canvas-wrapper">
                                <canvas id="mapCanvas" width="1200" height="1200"></canvas>
                                <div class="grid-overlay" id="gridOverlay"></div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧调试栏 -->
                    <div class="col-lg-2 col-md-3">
                        <div class="debug-sidebar">
                            <!-- 元素选择器 -->
                            <div class="sidebar-section">
                                <h3 class="section-title">
                                    <i class="bi bi-palette"></i>
                                    地图元素
                                </h3>
                                <div class="element-selector">
                                    <div class="element-item active" data-element="obstacle">
                                        <i class="bi bi-square-fill obstacle-icon"></i>
                                        <span>障碍物</span>
                                    </div>
                                    <div class="element-item" data-element="spawn">
                                        <i class="bi bi-circle-fill spawn-icon"></i>
                                        <span>生成点</span>
                                    </div>
                                    <div class="element-item" data-element="respawn">
                                        <i class="bi bi-triangle-fill respawn-icon"></i>
                                        <span>复活点</span>
                                    </div>
                                    <div class="element-item" data-element="special1">
                                        <i class="bi bi-diamond-fill special-icon"></i>
                                        <span>特殊物品1</span>
                                    </div>
                                    <div class="element-item" data-element="special2">
                                        <i class="bi bi-star-fill special-icon"></i>
                                        <span>特殊物品2</span>
                                    </div>
                                    <div class="element-item" data-element="special3">
                                        <i class="bi bi-heart-fill special-icon"></i>
                                        <span>特殊物品3</span>
                                    </div>
                                    <div class="element-item" data-element="boss">
                                        <i class="bi bi-shield-fill boss-icon"></i>
                                        <span>Boss点</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 编辑工具 -->
                            <div class="sidebar-section">
                                <h3 class="section-title">
                                    <i class="bi bi-tools"></i>
                                    编辑工具
                                </h3>
                                <div class="edit-tools">
                                    <div class="tool-btn active" data-tool="place">
                                        <i class="bi bi-brush"></i>
                                        <span>放置</span>
                                    </div>
                                    <div class="tool-btn" data-tool="erase">
                                        <i class="bi bi-eraser"></i>
                                        <span>擦除</span>
                                    </div>
                                    <div class="tool-btn" data-tool="select">
                                        <i class="bi bi-cursor"></i>
                                        <span>选择</span>
                                    </div>
                                    <div class="tool-btn" data-tool="move">
                                        <i class="bi bi-arrows-move"></i>
                                        <span>移动</span>
                                    </div>
                                    <div class="tool-btn" id="undoBtn">
                                        <i class="bi bi-arrow-counterclockwise"></i>
                                        <span>撤销</span>
                                    </div>
                                    <div class="tool-btn" id="redoBtn">
                                        <i class="bi bi-arrow-clockwise"></i>
                                        <span>重做</span>
                                    </div>
                                </div>
                                
                                <!-- 画笔大小设置 -->
                                <div class="brush-size-section">
                                    <h4 class="section-subtitle">
                                        <i class="bi bi-brush"></i>
                                        画笔大小
                                    </h4>
                                    <div class="brush-size-controls">
                                        <div class="brush-size-option active" data-size="1">
                                            <span>1×1</span>
                                        </div>
                                        <div class="brush-size-option" data-size="3">
                                            <span>3×3</span>
                                        </div>
                                        <div class="brush-size-option" data-size="5">
                                            <span>5×5</span>
                                        </div>
                                        <div class="brush-size-option" data-size="7">
                                            <span>7×7</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </main>


    </div>

    <!-- Bootstrap JS -->
    <script src="../plugin/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="../plugin/jquery-3.7.1.min.js"></script>
    
    <!-- 地图编辑器JS -->
    <script src="js/editor.js"></script>
</body>
</html>